import React, {Component, PropTypes} from "react";
import {connect} from "react-redux";
import {fetchPosts, reset} from "../../actions";
import {Link} from "react-router";
import cookie from "react-cookie";
import isEqual from "lodash/isEqual";
import OrderGoodsDetail from "../../components/OrderGoodsDetail";


class orderDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            myOrderDetail: {},
            orderStatus: 0,
            orderStatusDesc: "",
        }
    }

    componentWillMount() {
        document.title = "订单详情";
    }

    componentDidMount() {
        const params = this.props.location.query;
        const header = {"X-Client-ID": "123456", "X-Long-Token": cookie.load("token")};
        this.props.dispatch(reset("confirmDeliveryGoods"));
        this.props.dispatch(reset("orderDetail"));
        this.props.dispatch(fetchPosts("orderDetail", header, params));
    }

    componentWillUnmount() {

    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.OrderDetail.errorCode == 0) {
            this.setState({
                loading: false
            })
        }
        if (nextProps.OrderDetail.errorCode == 0 && !isEqual(nextProps.OrderDetail, this.props.OrderDetail)) {
            const orderDetailData = nextProps.OrderDetail.data.orderMainVo;
            this.setState({
                myOrderDetail: orderDetailData,
                orderStatus: orderDetailData.orderStatus,
                orderStatusDesc: orderDetailData.orderStatusDesc
            });
        }
        if (nextProps.CancelOrder.errorCode == 0) {
            this.setState({orderStatus: -100, orderStatusDesc: '取消订单'});
        }
        if (nextProps.confirmDeliveryGoods.errorCode == 0) {
            this.setState({orderStatus: 100, orderStatusDesc: '交易成功'});
            console.log("-------------->: " + this.state.myOrderDetail.orderId);
            window.location.href = "/#/mall/tradeSuccess?orderId=" + this.state.myOrderDetail.orderId;
        }
    }

    goToPay(){
        window.location.href = "http://weixin.hzyisu.com/orderPay.html?orderId=" + this.state.myOrderDetail.orderId;
    }

    orderStatusToShow() {
        if (this.state.orderStatus == 0) {
            return (
                <div>
                    <Link onClick={this.cancelOrder.bind(this)}>取消订单</Link>
                    <Link onClick={this.goToPay.bind(this)}>付款</Link>
                </div>
            )
        } else if (this.state.orderStatus == -100) {
            return (
                <div>
                </div>
            )
        } else if (this.state.orderStatus == 10) {
            return (
                <div>
                    {/*<Link onClick={this.cancelOrder.bind(this)}>取消订单</Link>*/}
                </div>
            )
        } else if (this.state.orderStatus == 20) {
            return (
                <div>
                    <Link onClick={this.confirmReceipt.bind(this)}>确认收货</Link>
                </div>
            )
        }
    }

    cancelOrder() {
        if (confirm("是否取消订单")) {
            const header = {"X-Client-ID": "123456", "X-Long-Token": cookie.load("token")};
            this.props.dispatch(fetchPosts("cancelOrder", header, {"orderId": this.state.myOrderDetail.orderId}))
        }
    }

    confirmReceipt() {
        if (confirm("是否确认收货")) {
            console.log("confirmDeliveryGoods" + this.state.myOrderDetail.orderId);
            const header = {"X-Client-ID": "123456", "X-Long-Token": cookie.load("token")};
            this.props.dispatch(fetchPosts("confirmDeliveryGoods", header, {"orderId": this.state.myOrderDetail.orderId}));
        }
    }

    render() {
        if (this.state.loading) {
            return (<div className="loading"><span>loading</span></div>)
        } else {
            return (
                <div >
                    <div className="order-top-page">
                        <ul className="page-ul-one">
                            <li>下单时间：{this.state.myOrderDetail.createTime}</li>
                            <li>订单编号: {this.state.myOrderDetail.orderId}</li>
                            <p>{this.state.orderStatusDesc}</p>
                        </ul>
                        <ul>
                            {this.state.myOrderDetail.orderSubVos.map((item, index) => {
                                    return (
                                        <OrderGoodsDetail item={item} key={index}/>
                                    )
                                }
                            )}
                        </ul>
                        <ul>
                            <li>
                                <div className="mall-myOrder-three">
                                    <p className="order-detail-button">
                                        {this.orderStatusToShow()}
                                    </p>
                                </div>
                            </li>
                            <li>{this.state.myOrderDetail.consigneeName} <span
                                className="span-hidden">隐藏起来</span>{this.state.myOrderDetail.consigneeAccount}</li>
                            <li>
                                {this.state.myOrderDetail.consigneeProvince}
                                {this.state.myOrderDetail.consigneeCity}
                                {this.state.myOrderDetail.consigneeArea}
                                {this.state.myOrderDetail.consigneeAddress}
                            </li>
                        </ul>
                    </div>
                    <div className="order-down-page">
                        <ul>
                            <li>支付方式：{this.state.myOrderDetail.payTypeDesc}</li>
                            <li>商品合计：￥{this.state.myOrderDetail.goodsAllAmount}</li>
                            {/*<li>进口税：￥{this.state.myOrderDetail. bazaarPrice}</li>*/}
                            <li>实付：￥{this.state.myOrderDetail.orderAmount}</li>
                        </ul>
                    </div>
                </div>
            )
        }
    }
}

orderDetail.propTypes = {
    isFetching: PropTypes.bool.isRequired,
    dispatch: PropTypes.func.isRequired
}
orderDetail.contextTypes = {
    router: React.PropTypes.object
}

function mapStateToProps(state) {
    const {postsByApi} = state
    const {
        isFetching,
        items: OrderDetail
    } = postsByApi["orderDetail"] || {
        isFetching: false,
        items: {}
    }
    const {
        items: CancelOrder
    } = postsByApi["cancelOrder"] || {
        items: {}
    }
    const {
        items: confirmDeliveryGoods
    } = postsByApi["confirmDeliveryGoods"] || {
        items: {}
    }
    return {
        confirmDeliveryGoods,
        CancelOrder,
        OrderDetail,
        isFetching
    }
}
export default connect(mapStateToProps)(orderDetail);

